<template>
	<view class="page_bg">
		<z-paging ref="paging" v-model="teachers" @query="getList" :empty-view-fixed="true" :fixed="false"
			:hide-loading-more-when-no-more-by-limit="5">
			<view class="list-item flex-row" v-for="item in teachers" :key="item._id" @tap="checkDetail(item._id)">
				<u-image :src="item.avatar" shape="circle" :lazy-load="true" class="image_2" mode="aspectFill">
				</u-image>
				<view class="right-group flex-col">
					<text class="text_1">{{item.name}}</text>
					<text class="text_3">简介：{{item.title}}</text>
				</view>
			</view>
		</z-paging>
	</view>
</template>

<script>
	var that; // 当前页面对象
	var vk; // vk依赖
	export default {
		data() {
			// 页面数据变量
			return {
				teachers: []
			}
		},
		// 监听 - 页面每次【加载时】执行(如：前进)
		onLoad(options = {}) {
			that = this;
			vk = that.vk;
			that.init(options)
		},
		// 监听 - 页面【首次渲染完成时】执行。注意如果渲染速度快，会在页面进入动画完成前触发
		onReady() {},
		// 监听 - 页面每次【显示时】执行(如：前进和返回) (页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面)
		onShow() {},
		// 监听 - 页面每次【隐藏时】执行(如：返回)
		onHide() {},
		// 函数
		methods: {
			// 页面数据初始化函数
			init(options) {},
			// 获取列表
			getList(pageNo, pageSize) {
				vk.callFunction({
					url: 'client/teachers/pub/getList',
					title: '获取中...',
					data: {
						pageNo,
						pageSize,
					},
					success(data) {
						that.$refs.paging.complete(data.rows);
					}
				});
			},
			// 查看教师详情
			checkDetail(id) {
				uni.vk.navigateTo('/pages/teachers/detail?id=' + id);
			}
		},
	}
</script>

<style lang="scss" scoped>
	.page_bg {
		height: 100vh;
		background-color: #F5F5F5;
		padding: 20rpx 20rpx 0;
	}

	.list-item {
		padding: 30rpx 20rpx;
		background-color: rgb(255, 255, 255);
		border-radius: 16rpx;
		display: flex;
		align-items: center;

		&:not(:first-of-type) {
			margin-top: 20rpx;
		}

		.image_2 {
			width: 112rpx !important;
			height: 112rpx !important;
		}

		.right-group {
			margin-left: 20rpx;
			margin-top: 10rpx;
			flex: 1 1 auto;

			.text_1 {
				color: rgb(51, 51, 51);
				font-size: 32rpx;
				line-height: 38rpx;
				white-space: nowrap;
			}

			.text_3 {
				margin-top: 18rpx;
				color: rgb(102, 102, 102);
				font-size: 24rpx;
				line-height: 28rpx;
				text-align: left;
			}
		}
	}
</style>
